<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="修改SPU信息"
    width="860px"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <el-form :model="formValues" label-position="top" ref="formRef" class="mx-5 my-5">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否需要拍照">
                <el-radio-group v-model="formValues.need_photo">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要加工">
                <el-radio-group v-model="formValues.need_processing">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号">
            <el-input v-model="formValues.specification_model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单位">
            <el-select
              class="w-full"
              v-model="formValues.spu_unit"
              collapse-tags
              placeholder="选择"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSkuSalesInfo']?.[0]?.spuUnitText || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品来源">
            <el-select
              class="w-full"
              v-model="formValues.goods_source"
              collapse-tags
              placeholder="选择"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0]?.goodsSourceText || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品物流属性">
            <select-logistics
              class="w-full"
              v-model="formValues.logistics_attributes"
              :default="true"
              placeholder="选择"
              @change="changeLogistics"
            ></select-logistics>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌类型">
            <!-- <VGroup > -->
            <el-select v-model="formValues.brand_type" class="w-full">
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0]?.brandTypeText || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-input
                v-model="formValues.imitation_remark"
                placeholder="仿牌备注"
              ></el-input> -->
            <!-- </VGroup> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="本地收货仓">
            <select-warehouse
              v-model="formValues.warehouse_id"
              placeholder="选择"
              class="w-full"
              @change="changeWarehouse"
            ></select-warehouse>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="SPU等级">
            <el-select
              class="w-full"
              v-model="formValues.recommended_level"
              collapse-tags
              placeholder="选择"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0]?.recommendLevelText || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="SPU等级">
            <el-select
              class="w-full"
              v-model="formValues.recommended_level"
              collapse-tags
              placeholder="选择"
              clearable
            >
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0]?.recommendLevelText || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品标签">
            <el-select class="w-full" v-model="formValues.goods_tag" @change="changeTag">
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0]?.goodsTagText || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import SelectLogistics from "@/components/SelectLogistics";
import SelectWarehouse from "@/components/SelectWarehouse";
import { batchUpdateSpu } from "../api.js";
const visible = ref(false);
const loading = ref(false);
const formValues = ref({});
const formRef = ref();
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);
const ids = ref({});
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value.spu_ids = data;
  visible.value = true;
};

const save = async () => {
  const valid = await formRef.value.validate();
  if (!valid) return;
  loading.value = true;
  try {
    const res = await batchUpdateSpu(
      Object.assign({}, { params: formValues.value }, ids.value)
    );
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const changeWarehouse = (val) => {
  formValues.value.warehouse_name = val;
};

const changeLogistics = (val) => {
  formValues.value.logistics_attributes_name = val;
};

const close = async (refresh) => {
  ids.value = {};
  formValues.value = {};
  await nextTick();
  await formRef.value.resetFields();
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
